<template>
  <d2-container>
    <template slot="header">
      <el-button @click="onAdd" type="primary" size="small">新增</el-button>
    </template>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      stripe
      border
      lazy
      :load="load"
      :key="tableItemKey"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="title"
        label="菜单名称"
        width="180">
      </el-table-column>
      <el-table-column
        label="图标"
        width="50">
        <template slot-scope="scope">
          <d2-icon :name="scope.row.icon"></d2-icon>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="50">
      </el-table-column>
      <el-table-column
        prop="code"
        label="代号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="路径"
        width="180">
      </el-table-column>
      <el-table-column
        prop="seq"
        label="排序"
        width="100">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-dropdown @command="handleCommand(scope.row, $event)">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">添加下级</el-dropdown-item>
              <el-dropdown-item command="b">数据规则</el-dropdown-item>
              <el-dropdown-item command="c">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="编辑"
      :wrapperClosable="false"
      :visible.sync="drawerEdit" v-if="drawerEdit">
      <v-menuEdit :menuId.sync="editMenuId" @closeDrawer="closeDrawer" @refresh="refresh"></v-menuEdit>
    </el-drawer>
    <el-drawer
      title="添加"
      :wrapperClosable="false"
      :visible.sync="drawerAdd" v-if="drawerAdd">
      <v-menuAdd :parentId.sync="parentMenuId" @closeDrawer="closeDrawer" @refresh="refresh"></v-menuAdd>
    </el-drawer>
  </d2-container>
</template>

<script>
import api from '@/api'
import menuAdd from './add.vue'
import menuEdit from './edit.vue'
// import log from '@/libs/util.log'

export default {
  name: 'system-menu',
  components: {
    'v-menuAdd': menuAdd,
    'v-menuEdit': menuEdit
  },
  data () {
    return {
      tableData: [],
      tableItemKey: 0,
      drawerEdit: false,
      drawerAdd: false,
      editMenuId: '',
      parentMenuId: ''
    }
  },
  mounted () {
    this.getMenuByParentId(0)
  },
  methods: {
    load (tree, treeNode, resolve) {
      var param = { parentId: tree.id }
      api.sys_menu_list(param).then(res => {
        resolve(res)
      })
    },
    getMenuByParentId (id) {
      var param = { parentId: id }
      api.sys_menu_list(param).then(res => {
        this.tableData = res
      })
    },
    onEdit (row) {
      this.editMenuId = row.id
      this.drawerEdit = true
    },
    onAdd () {
      this.drawerAdd = true
      this.parentMenuId = 0
    },
    onDelete (data) {
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = [data.id]
        api.sysMenuDeleteById(param).then(res => {
          this.$message({ type: 'info', message: '已删除' })
          this.getMenuByParentId(0)
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleCommand (data, c) {
      if (c === 'a') {
        this.drawerAdd = true
        this.parentMenuId = data.id
      } else if (c === 'c') {
        this.onDelete(data)
      }
    },
    closeDrawer () {
      this.drawerAdd = false
      this.drawerEdit = false
    },
    refresh () {
      this.tableData = []
      this.tableItemKey = Math.random()
      this.getMenuByParentId(0)
    }
  }
}
</script>

<style lang="scss">
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
    margin-left: 10px;
  }
  .el-icon-arrow-down {
    font-size: 8px;
  }
  .drawer-body {
    padding: 0 10px;
  }
  .drawer-body .form {
    border: 1px solid #E9E9E9;
    padding: 10px;
  }
  .el-drawer__header {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E9E9E9;
  }
</style>
